<template>
  <ClientOnly>
    <div id="carteira-teleport" class="full-action-sheet-teleport"></div>
    <van-action-sheet
      :show="userStore.showCarteira"
      :before-close="beforeClose"
      destroyOnClose
      teleport="#carteira-teleport"
    >
      <BackHeader :title="systemLang.carteira_title" :callBack="beforeClose">
        <template #right>
          <HeaderMoney />
        </template>
      </BackHeader>
      <div class="carteira_center" :class="{ padding_init: !isTabRoute }">
        <Tabs :activeTab="activeTab" :tabs="tabs" @changeTab="changeTab" />
        <div v-show="activeTab === 1">
          <Receive />
          <Deposit :formData="formData" @changeFormData="changeFormData" />
        </div>
        <div v-show="activeTab === 2">
          <div class="tabs-box">
            <RightTab
              :activeTab="activeRightTab"
              :tabs="rightTab"
              @changeTab="changeRightTab"
            />
            <RightTabForm
              :activeTab="activeRightTab"
              :formData="formData"
              @changeFormData="changeFormData"
            />
          </div>
          <UserCard v-show="activeRightTab === 1" />
          <ComissaoCard v-show="activeRightTab === 2" />
          <RightMoneyForm />
        </div>
        <SubmitBtn :activeTab="activeTab" :formData="formData" />
      </div>
    </van-action-sheet>
  </ClientOnly>
</template>

<script setup lang="ts">
import HeaderMoney from "./components/HeaderMoney.vue";
import Tabs from "./components/Tabs.vue";
import Receive from "./components/left/Receive.vue";
import Deposit from "./components/left/Deposit.vue";
import SubmitBtn from "./components/SubmitBtn.vue";
import RightTab from "./components/right/RightTab.vue";
import RightTabForm from "./components/right/RightTabForm.vue";
import ComissaoCard from "./components/right/ComissaoCard.vue";
import RightMoneyForm from "./components/right/RightMoneyForm.vue";

const [userLang, systemLang, carteiraLang]: any = await Promise.all([
  getCurrentPageLang("user"),
  getCurrentPageLang("system"),
  getCurrentPageLang("carteira"),
]);

// 关闭
const userStore = useUserStore();
function beforeClose() {
  userStore.changeShowCarteira(false);
}

// 当路由变化，自动关闭
const route = useRoute();
watch(
  () => route.name,
  () => {
    beforeClose();
  }
);

// 表单数据
const formData: any = ref({});
// 改变表单数据
function changeFormData(data: any) {
  formData.value[data.key] = data.value;
}

// 1级tab
const activeTab: any = ref(1);
const tabs: any = ref([
  { id: 1, title: userLang.deposit_btn },
  { id: 2, title: userLang.withdraw_btn },
]);
function changeTab(tab: any) {
  activeTab.value = tab.id;
}

// 右边-2级tab
const activeRightTab: any = ref(1);
const rightTab: any = ref([
  { id: 1, title: carteiraLang.right_table_title },
  { id: 2, title: carteiraLang.right_table_commission },
]);
function changeRightTab(tab: any) {
  activeRightTab.value = tab.id;
}

// 弹窗每次打开时，初始化状态
onMounted(() => {
  initData();
});
watch(
  () => userStore.showCarteira,
  (val) => {
    if (!val) return;
    initData();
  }
);

const isTabRoute = ref(true);
function initData() {
  activeTab.value = userStore.showCarteiraType;
  activeRightTab.value = userStore.showCarteiraSaqueType;
  formData.value = {
    payNum: 0,
    right_tipo: "CPF",
    right_digite: "",
    right_entre: "",
  };

  // 如果当前页面不在tab里，那么不需要预留tab的底部高度
  const systemStore = useSystemStore();
  isTabRoute.value = systemStore.tabbarRouteNames.includes(
    route.name as string
  );
}
</script>

<style scoped lang="scss">
.carteira_center {
  padding: 1.45rem 0.25rem 1.46rem;
  height: 100vh;
  width: 100vw;
  background-color: var(--app-bg-color);
  padding-bottom: 2.4rem;
  overflow-y: auto;
  max-width: var(--max-client-width);
  margin: 0 auto;
}
.padding_init {
  padding-bottom: 0.5rem;
}
.tabs-box {
  border-radius: 0.2rem;
  background: #3f2e4b;
}
</style>
